const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
const {VueLoaderPlugin} =require("vue-loader")
const package=require("./package.json")
const {DefinePlugin}=require("webpack")
module.exports={
    entry:"./src/main.js", //入口
    output:{
        path:path.join(__dirname,"dist"),
        filename:"bundle.js",
    },
    module:{
        rules:[
            {
                test: /\.less$/, //处理less文件
                use: [  //执行顺序，从下往上
                  "style-loader",  //js挂载到html
                  "css-loader",    //css转成js
                  "less-loader",  //less转成css
                ],
            },
            {
                test: /\.css$/, //并没有css文件，主要是处理vue文件拆分出来的css
                use: [  //执行顺序，从下往上
                  "style-loader",  //js挂载到html
                  "css-loader",    //css转成js
                ],
            },
            {
                test:/\.png$/,
                type:"asset",
                // webapck5内置了对于资源模块的处理 。
                //默认小于8kb文件的会以Data URI的形式内嵌到代码中，
                //大于8kb的文件会单独存放，导出一个地址。
            },
            {
                test:/\.vue$/,
                use:"vue-loader"
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./public/index.html", //把index.html作为模板
            title:package.name, //以包名作为title
            inject:"body", //js文件注入到body中
        }),
        //使用vue-loader时，必须加上vueLoaderPlugin。
        //vue-loader会把vue文件拆成html，js，css文件。
        //VueLoaderPlugin会复制rules里面的规则，对拆分后的文件进行处理。
        new VueLoaderPlugin(), 
        new DefinePlugin({
            BASE_URL:"'/'"  //定义全局常量，index.html中有用到这个常量
        }),
    ],
}